<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>


        * {
            padding: 0;
            margin: 0;
        }


        div {
            columns: 300px 6;
            /* 每列300 一共四列 复合属性，可以拆开写 */
            column-count: 3;
            /* 设置成3列，没设置宽度，宽度自适应，不允许负值 */
            /* 默认值auto： */

            column-width: 300px;
            /* 列的宽度为300px（不包括间隙），不设置列的数量，会根据容器总宽度自动计算，当不能整除时，列的宽度会在300px左右浮动 */
            /*  */

            column-gap: 30px;
            /* 设置每列的间隙 */

            column-rule: 1px solid #000;
            /* 分割线，复合属性，和border一样 */


        }

        p {
            margin: 10px 0;
            /* column-span: all; */
            /* p标签在多列的元素内，让其横跨多列展示 */
            /* 默认值：   ，不横跨多列，但是p标签独占一行 */

            
            -webkit-column-break-before: always;
            -webkit-column-break-after: always;
            /* p标签前面另起一列，后面另起一列 */


        }


    </style>
</head>
<body>
    <div>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Non maiores saepe unde sint doloribus eveniet. Dolores officiis odit minima excepturi, sint deserunt, cum perspiciatis, pariatur est rem ad soluta? Quae sapiente repellendus dolorem amet id minus non porro accusantium possimus voluptatum, aliquid consequuntur modi adipisci atque vero alias eligendi dignissimos! Molestias commodi, voluptates porro voluptate sequi eos ipsum obcaecati cum cumque quasi incidunt iure sapiente voluptatibus numquam eaque! Sapiente ratione tempora illum perferendis tempore molestiae autem totam exercitationem. Doloremque aliquam eveniet corporis nisi possimus ducimus distinctio esse animi? Optio laborum totam, corrupti a impedit consequatur debitis perferendis in laudantium perspiciatis saepe molestias odio sapiente rem dolorem autem molestiae provident eligendi eveniet quo consectetur, laboriosam ducimus cumque! Assumenda, officia unde consequuntur numquam officiis laudantium dolor praesentium placeat molestiae quam vitae eum natus ea fugiat at eveniet id quae aspernatur tempora. Enim, sit temporibus illum corporis quos earum, error reiciendis tenetur ea minus, alias hic magni! Hic iste iure qui, a eveniet labore pariatur architecto esse atque, odit adipisci sequi minus amet dolorum sint eligendi praesentium possimus ipsa! Explicabo commodi, non accusantium in et autem accusamus suscipit iste maxime libero mollitia consequuntur dicta voluptatum dolorum inventore molestiae possimus velit, blanditiis nobis sit, cupiditate aspernatur obcaecati! Delectus in odio, quidem vitae, provident fuga dicta, ipsa iste nostrum sint totam reiciendis? Voluptatem, eos? Ab animi nam pariatur veniam eaque est vel, laudantium eligendi perspiciatis quasi? Ipsam illum possimus quia molestias, tenetur quisquam eius nihil officia deleniti quis numquam fugit ea, neque totam. Ea explicabo voluptatem iste, fugit ducimus enim quaerat. Necessitatibus, quos nostrum! Pariatur, minima. Itaque porro alias, debitis placeat veniam dolores modi possimus non odit laboriosam pariatur maxime quisquam architecto ipsam magnam, tempore necessitatibus fugit eius similique natus minima. Odit ea neque voluptates qui quos, molestiae sit odio voluptate quia itaque reiciendis quasi temporibus accusamus sint est ratione incidunt mollitia hic exercitationem perferendis laborum laudantium dignissimos dolor repellendus! Perspiciatis, molestiae. At neque hic autem expedita dicta minima iste
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem earum nam ullam! Dolorum doloribus similique distinctio nisi officiis dolore, ex vel ullam vitae eius, sapiente voluptates fugit! Non quidem quasi facilis numquam minus delectus libero nisi omnis sint, autem placeat provident voluptas commodi quas exercitationem tenetur voluptatibus voluptate harum iure quae similique repellendus perspiciatis cum? Similique culpa soluta, ex, veniam dolorem optio vel provident reiciendis asperiores cum odio iusto, aliquam inventore dicta accusamus architecto omnis facilis! Quas nisi recusandae minima, facilis unde quod omnis voluptas ullam sequi esse, ducimus deserunt quis fugit voluptates eligendi, earum libero ad quam sed odio?</p>
        ex inventore numquam ipsa et, vero, nam error molestias aliquid! Quam laudantium praesentium similique iure fuga quos voluptatibus aut magni expedita perspiciatis minus, quidem esse excepturi eligendi accusantium qui distinctio eaque ad alias quisquam tenetur veritatis laborum, sunt nihil? Fuga sit, minus dolores dicta non nihil cum facilis maxime sunt quo reiciendis ducimus aut libero odio. Quo esse repellat eum expedita officiis laborum qui est odit maxime. Dolor tempora odio deserunt perferendis repellat culpa perspiciatis quaerat sapiente ratione commodi beatae labore, illum doloremque soluta rem eius earum sed corporis veritatis dicta ullam? Eveniet unde, iure maiores distinctio ullam voluptatum facere libero fugiat dolor sequi minus nemo amet magni, aliquam consequuntur! Tempore illo alias voluptatum nemo, enim doloremque dolorum reiciendis reprehenderit! Beatae iusto cupiditate harum repellendus deserunt, quo ipsa quisquam, corrupti, corporis doloribus repellat vel libero neque quae facere accusamus minima itaque debitis? Sapiente exercitationem ipsum neque, deleniti voluptas est accusamus nostrum nesciunt eos reprehenderit perspiciatis assumenda praesentium vel culpa impedit aspernatur amet, optio facilis. Aperiam quam quod, quos incidunt ad deleniti. Expedita aspernatur reprehenderit velit possimus nostrum ea debitis culpa, doloremque voluptates! Ad, libero quasi delectus molestias quaerat debitis cumque amet neque id placeat culpa ut fugiat assumenda, dolorum veritatis tenetur saepe adipisci tempore, in unde? Perspiciatis, accusantium! Assumenda illum ad eveniet reprehenderit alias cupiditate ab! Optio mollitia vel eaque, ut unde nobis saepe ratione, nesciunt minus veritatis natus nemo illo explicabo velit! Velit ea illum hic, nesciunt molestias corrupti. Recusandae, neque officia quos, laboriosam ab quaerat doloremque sunt in voluptas minus, debitis error? Nisi velit iusto aut, hic quos id rerum quod expedita? Omnis modi commodi molestias animi, expedita vero est excepturi unde doloremque a nulla nihil quia distinctio eos! Perspiciatis vitae aspernatur delectus enim, corrupti iste! Omnis vero reprehenderit provident quo minus, molestias quisquam accusantium, obcaecati nostrum quia soluta quos animi. Nobis dolore inventore adipisci quibusdam cumque distinctio nemo quo, deleniti temporibus ipsum ex, earum, unde excepturi asperiores aspernatur rerum vitae amet sed? Quisquam quaerat, esse suscipit aliquam reiciendis impedit nam dicta tenetur, soluta hic tempore, ad quia harum! Excepturi reprehenderit et, a voluptatibus temporibus iste harum incidunt, culpa consequuntur quae eum fugit nobis velit nostrum perferendis exercitationem nulla cumque maxime explicabo rem ducimus odio asperiores saepe. Fugiat officiis reprehenderit in inventore cum aperiam sunt ipsam quae amet minima, voluptates, nobis deserunt quis magni eaque repellendus a quos modi delectus non. Minus id quasi quo delectus voluptatum consectetur soluta aperiam ducimus ab expedita deserunt, sequi consequatur totam animi sapiente atque omnis, optio quidem ad facilis! Minima ullam eveniet deserunt dolore maxime. Perspiciatis nesciunt libero asperiores ea ab voluptatem, quas repellat voluptates consequuntur quos excepturi quasi. Ipsam omnis hic similique esse, quia vitae ex minima possimus? Fuga sit sequi placeat distinctio numquam, harum perferendis ut. Sunt dolore facere quis possimus dolor assumenda ea recusandae totam amet quisquam? Culpa quae laborum dolores itaque dolore sequi facilis tempore delectus suscipit nobis dolorem quasi eveniet labore non ipsa ad at cumque voluptas, et iure, ex omnis doloremque aspernatur sapiente. Magni expedita unde sequi eius ipsum fugiat dolor! Hic magni obcaecati, tempora in saepe temporibus ipsam corrupti non deserunt ad doloribus perferendis neque nihil. Architecto repellendus perferendis totam impedit, quasi exercitationem delectus minima excepturi, velit incidunt veniam id culpa iure voluptatum placeat beatae vel temporibus libero magnam dolor, dicta maiores? Veniam error recusandae aliquam commodi minus officia officiis dolore ratione molestias quis tempore facere aperiam, ullam ipsum doloribus exercitationem dolorum, placeat animi accusamus magnam repudiandae quaerat perferendis eveniet. Atque voluptatem, quasi, velit beatae dolor dolorum consequuntur illum dolorem, iste omnis magnam vel tempore libero labore unde rerum deleniti nam id rem mollitia veritatis? Voluptates numquam rem asperiores voluptas eum eveniet sunt! Cupiditate voluptates nemo adipisci nisi, repellendus quis recusandae, aliquam rem similique eveniet excepturi vel id deleniti voluptate. Ea laboriosam deserunt veniam at id ab, illum tempora voluptatem laborum ipsam nesciunt adipisci, iusto vel vero ducimus quia placeat assumenda dolores blanditiis omnis, repudiandae molestiae enim. Sed voluptatum distinctio laboriosam blanditiis voluptas omnis molestiae, asperiores laudantium alias debitis. Quisquam est incidunt obcaecati, corrupti alias voluptas saepe officia minima suscipit?
    </div>

    
</body>
</html>